//场地使用情况
<template>
  <div style="display:block !important;">
    <!-- 添加场地 -->
    <template>
      <span class="block">
        <span class="demonstration">添加场地</span>
        <!-- 第一个为日期选择，后三个为下拉框选择 -->
        <el-date-picker @change="changeValue_one" v-model="form.birthdayName" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
        </el-date-picker>
      </span>
      <el-select @change="changeValue1" v-model="value" clearable placeholder="请选择负责人">
        <el-option v-for="(item) in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>

    <template>
      <el-select @change="changeValue2" v-model="value1" clearable placeholder="请选择区域">
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>

    <template>
      <el-select @change="changeValue3" v-model="value2" clearable placeholder="请选择状态">
        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">

        </el-option>
      </el-select>
      <!-- 保存新地址按钮 -->
      <el-button type="primary" class="save" @click="add()">保存</el-button>
    </template>


    <!-- 列表头部 -->
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" sortable width="180" column-key="date"
        :filters="[{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }]"
        :filter-method="filterHandler">
      </el-table-column>
      <el-table-column prop="name" label="负责人" width="180">
      </el-table-column>
      <el-table-column prop="address" label="区域" :formatter="formatter">
      </el-table-column>
      <!-- 移除按钮 -->
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
      <!-- 状态栏 -->
      <el-table-column prop="tag" label="状态" width="100"
        :filters="[{ text: '使用中', value: '使用中' }, { text: '空闲', value: '空闲' }]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>


    </el-table>


  </div>
</template>

<script>


export default {
  data() {
    return {
      // 列表数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '悼念厅',
        tag: '使用中'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        tag: '空闲'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        tag: '使用中'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '空闲'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '空闲'
      }
      ],
      //下拉框选项
      newmessage: { date: '', name: '', address: '', tag: '' },
      options1: [{
        value: '张三',
        label: '张三'
      }, {
        value: '李四',
        label: '李四'
      }, {
        value: '王五',
        label: '王五'
      }],
      options2: [{
        value: '悼念厅',
        label: '悼念厅'
      }, {
        value: '区域2',
        label: '区域2'
      }, {
        value: '区域3',
        label: '区域3'
      }],
      options3: [{
        value: '使用中',
        label: '使用中'
      }, {
        value: '空闲',
        label: '空闲'
      }],
      value: '',
      value1: '',
      value2: '',

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      form: {
        birthdayName: ''
      },
      // value_one: '',
      // value_two: '',
      //open*()为消息函数
      open1() {
        this.$message('这是一条消息提示');
      },
      open2() {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          message: '请输入完整信息！',
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      }
    }

  },
  methods: {
    //
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    //列表的方法
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    //保存按钮存储新数据的暂存列表方式
    changeValue1(e) {
      this.newmessage.name = e
    },
    changeValue2(e) {
      this.newmessage.address = e
    },
    changeValue3(e) {
      this.newmessage.tag = e
    },
    changeValue_one(val) {
      this.form.birthdayName = val;
      this.newmessage.date = val
    },
    //保存按钮的方法
    add() {


      if (!this.newmessage.name == '' & !this.newmessage.address == '' & !this.newmessage.tag == '' & !this.newmessage.date == '') {
        this.tableData.push(this.newmessage)
        this.open2(true)
        this.newmessage = {
          date: '',
          name: '',
          address: '',
          tag: ''
        };
      }
      else {
        this.open3(true)
        // alert('请输入完整信息！')
      }
    },
    //移除按钮的方法
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }

  }
}
</script>

<style>
/* 在这里添加样式 */
/* .demonstration {
  border-radius: 30px;
  line-height:1.7
  /* padding-left: -50px; */

/* } */
*/ .el-select {
  padding: 20px;
}

/* span.block{
  padding:0%;
} */
</style>

<style scoped></style>